<template>
  <div>
    <!-- 九宫格 -->
    <div class="index-container" style="height: 480px;" v-if="showFlag == 1">
      <div class="index-title">
        重要指标
      </div>
      <div class="index-echarts">
        <ul class="index-box">
          <li v-for="(i, index) in 9" :key="index">
            <div class="index-item" v-for="(i, index) in 4" :key="index">
              <p class="index-item-left">
                客户数
              </p>
              <p class="index-item-right">
                20000
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 折线图 -->
    <div class="marketing-container" style="height: 480px;" v-if="showFlag == 2">
      <div class="marking-index" style="width: 100%;">
        <div class="index-header" style="margin: 20px 0;margin-left: 20px;">
          <div class="index-title">重要指标</div>
          <div style="display: flex;">
            <div class="btnSelct">
              <div :class="['btnCont', checkFlag == '0' ? 'btnCheck' : '']" @click="changFlag(0)">业绩</div>
              <div :class="['btnCont', checkFlag == '1' ? 'btnCheck' : '']" @click="changFlag(1)">管户</div>
            </div>
            <ui-select v-model="khtype" placeholder="请选择" style="margin-right: 20px;">
              <ui-option :value="0" label="时点余额"></ui-option>
              <ui-option :value="1" label="失败"></ui-option>
            </ui-select>
          </div>
        </div>
      </div>
      <div>
        <div id="main" style="width: 90%;height: 400px;margin: 10px auto;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    // 1=>  九宫格   2=>折线图
    showFlag: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      khtype: 0,
      checkFlag: 0
    }
  },
  mounted() {
    this.echartsCont()
  },
  methods: {
    changFlag(val) {
      this.checkFlag = val
    },
    echartsCont() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['存款时点', '贷款时点']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name:'单位：万元'
          }
        ],
        series: [
          {
            name: '贷款时点',
            type: 'line',
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210],
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#5B73FF" },
                { offset: 0.5, color: "rgba(91, 115, 255,0.2)" },
                { offset: 1, color: "rgba(91, 115, 255,0)" },
              ]),
            },
          },
          {
            name: '存款时点',
            type: 'line',
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310],
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#00BF74" },
                { offset: 0.5, color: "rgba(0,191,116,0.2)" },
                { offset: 1, color: "rgba(91,115,255,0)" },
              ]),
            },
          }
        ]
      };
      option && myChart.setOption(option);
    }
  },
};
</script>

<style lang="scss" scoped>
@mixin index($content) {
  content: $content;
  position: absolute;
  top: 50%;
  left: -50%;
  transform: translateY(-50%);
  font-size: 14px;
}

@mixin production($content) {
  &::after {
    position: absolute;
    content: $content;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #f10;
  }
}

.index-container {
  box-sizing: border-box;
  width: 100%;
  margin-top: 20px;
  border-radius: 8px;
  background-color: #fff;
  padding: 20px 20px;

  .index-title {
    font-size: 20px;
    color: #333;
    font-weight: 600;
  }

  .index-echarts {
    position: relative;
    margin-left: 100px;
    margin-top: 40px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;

    &::after {
      content: '持有产品数';
      position: absolute;
      bottom: -20px;
      right: -7px;
      font-size: 14px;
      color: #ccc;
    }

    .index-box {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-flow: row dense;
      padding: 20px 0px 20px 20px;

      li {
        margin-right: 30px;
        padding: 10px;
        margin-bottom: 5px;
        border: 1px solid #333;
        border-radius: 8px;

        &:nth-child(1) {
          position: relative;

          &::before {
            @include index('SV.9');
          }
        }

        &:nth-child(4) {
          position: relative;

          &::before {
            @include index('SV.8');
          }
        }

        &:nth-child(7) {
          position: relative;

          &::before {
            @include index('SV.7');
          }
        }

        &:nth-child(7) {
          position: relative;
          @include production('0-2支');
        }

        &:nth-child(8) {
          position: relative;
          @include production('3-5支');
        }

        &:nth-child(9) {
          position: relative;
          @include production('6支+');
        }

        .index-item {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .index-item-left {
            margin-right: 20px;
            font-size: 14px;
            color: #ccc;
          }

          .index-item-right {
            font-size: 14px;
            color: #333;
          }
        }
      }
    }

    &::before {
      content: '客户等级';
      position: absolute;
      left: -30px;
      top: -26px;
      color: #ccc;
      font-size: 16px;
    }
  }
}

.marketing-container {
  width: 100%;
  margin-top: 20px;
  background-color: #fff;

  .marking-index {
    box-sizing: border-box;
    width: 60%;
    margin-right: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;

    .index-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .index-title {
        color: #333;
        font-weight: 600;
        font-size: 20px;
      }
    }
  }
}

.btnSelct {
  width: 150px;
  height: 30px;
  background: #FFFFFF;
  border: 1px solid #5B73FF;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
  border-radius: 4px;
  cursor: pointer;
}

.btnCont {
  width: 75px;
  height: 30px;
  color: #5B73FF;
  text-align: center;
  line-height: 30px;
}

.btnCheck {
  background: #5B73FF;
  color: #fff;
}
</style>
